<template>
    <div style="width:200px;padding: 20px;">
        <div class="head-container">
            <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
                style="margin-bottom: 20px;width: 160px;" />
        </div>
        <div class="head-container">
            <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" 
                :filter-node-method="filterNode" ref="tree" node-key="deptId" :show-checkbox="checkbox" default-expand-all
                highlight-current @node-click="handleNodeClick" @check-change="handleCheckChange"
                @check="handleCurrentChecked" />
        </div>
    </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listDept } from "@/api/system/dept";
export default {
    components: { Treeselect },
    name: 'deptTree',
    props: ['checkbox', 'ids'],
    data() {
        return {
            deptOptions: undefined,
            // 部门名称
            deptName: undefined,
            id: null,
            // 部门树选项
            data: [],
            defaultProps: {
                children: 'children',
                label: 'deptName'
            },
        };
    },
    watch: {
        // 根据名称筛选部门树
        deptName(val) {
            this.$refs.tree.filter(val);
        }
    },
    mounted() {
        console.log('treeSelect Mountd')
        this.getList()
    },
    methods: {
        //通过key 设置
        setCheckedKeys(ids) {
            console.log('ids',ids,this.deptOptions)
            // let keys = this.ids
            this.$refs.tree.setCheckedKeys(ids);
        },
        //清除所有选中得节点
        clearCheckeds() {
            this.$nextTick(() => {
                this.$refs.tree.setCheckedKeys([]);
            });
        },
        handleCurrentChecked(nodeObj, selectedObj) {
            let CheckedNodes = this.$refs.tree.getCheckedNodes()
            let ids = selectedObj.checkedKeys
            this.$emit('CheckedNodesIds', ids, nodeObj)
        },
        handleCheckChange(val, checked, indeterminate) {
            this.$emit('changeNode', val, checked)
            this.deptOptions.forEach(element => {
                if (val.deptId == element.deptId) {
                    element.check = checked
                }
            });
            // console.log(val, checked, indeterminate);
        },
        handleNodeClick(val) {
            this.$emit('点击了', val)
            this.$emit('handleNodeClick', val, false)
        },
        /** 查询部门列表 */
        getList() {
            listDept().then((response) => {
                this.deptOptions = this.handleTree(response.data, "deptId");
                this.deptOptions.forEach(element => {
                    element.check = false
                });
                // 使用$nextTick 等页面加载完毕之后-在选中，防止加载顺序问题
                this.$nextTick(function () {
                    if(this.deptOptions&&this.deptOptions.length>0){  
                        let val=this.deptOptions[0].deptId;             
                        this.$refs.tree.setCurrentKey(this.deptOptions[0].deptId);
                        this.$emit('handleNodeClick',val);
                    }
                });
            });
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.deptName.indexOf(value) !== -1;
        },
    },
};
</script>

<style lang="scss" scoped>
</style>